<template>
  <div>
    <bread>
      <h1>学校信息配置</h1>
    </bread>
    <page-content isCard>
      <section>
        <div class="section-header">
          <h1>学校信息</h1>
          <small>设定学校基本信息</small>
        </div>
        <div class="section-content">
          <div :class="{'editing': collegeEditing, 'college-block': true}">
            <el-form action=""  :model="collegeInfo" ref="collegeInfo">
              <el-row>
                <el-col :span="3"><label>单位名称</label></el-col>
                <el-col :span="9">
                  <p class="visible">
                    大学名字
                  </p>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3"><label>单位名称（英文）</label></el-col>
                <el-col :span="9">
                  <p>
                    单位英文名字
                  </p>
                    <el-form-item prop="en_name">
                      <el-input class="input" v-model="collegeInfo.en_name" name="en_name" placeholder="请输入单位英文名（必填）"></el-input>
                    </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2"><label>校徽设定</label></el-col>
                <el-col :span="10">
                  <div class="img-wrap" :data-src="'cc'">
                    <img v-if="false" :src="college.badge_url" alt="" class="college-logo">
                    <img v-else src="~assets/logo.png" alt="" class="college-logo">
                    <label for="" class="upload-badge">
                      更换校徽
                      <input type="file" accept="image/*" @change="updateBadge">
                    </label>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-button v-if="!collegeEditing" @click="collegeEditing = true">编辑</el-button>
                  <el-button v-if="collegeEditing" @click="confirmCollegeModify('collegeInfo')" type="primary" :loading="submitLoading">保存</el-button>
                  <el-button v-if="collegeEditing" @click="cancelCollegeEditing('collegeInfo')">取消</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <el-dialog title="裁剪图片"
          :visible.sync="dialogVisible"
          :modal-append-to-body="false"
          :close-on-click-modal="false">
          <div id="image_area" style="max-width: 400px; max-height: 400px; margin: 0 auto;">
            <img :src="url" style="width: 100%; opacity: 0;" />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelChange">取 消</el-button>
            <el-button
              type="primary"
              @click="changeBadge"
              :loading="loading">
              确 定
            </el-button>
          </div>
        </el-dialog>
      </section>
    </page-content>
  </div>
</template>
<script>
import Cropper from 'cropperjs';
require('cropperjs/dist/cropper.css');
export default {
  data() {
    return {
      collegeEditing: false,
      collegeInfo: {
        zh_name: '某大学',
        en_name: 'university',
      },
      Globals: {},
      submitLoading: false,
      url: '',
      dialogVisible: false,
      loading: false,
    }
  },
  methods: {
    updateBadge(event) {
      this.showCropPop(event.target.files[0]);
      event.target.value = '';
      event.target.files = null;
    },
    showCropPop(file) {
      this.Globals.file = file;
      this.url = this.getObjectURL(file);
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.createCropper();
      });
    },
    createCropper() {
      if (this.Globals.cropper) {
        this.Globals.cropper.destroy();
      }
      var image = document.querySelector('#image_area img');
      var cropper = new Cropper(image, {
        aspectRatio: 1,
        dragMode: 'move',
        viewMode: 0,
        autoCrop: true,
        zoomOnWheel: false,
        background: false,
        toggleDragModeOnDblclick: false,
        ready() {
          this.cropper.crop();
        }
      });
      this.Globals.cropper = cropper;
      // if ($('#image_area img').attr('src')) {
      // }
    },
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL !== undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL !== undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL !== undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    confirmCollegeModify(englishData) {
      this.collegeEditing = false;
    },
    cancelCollegeEditing(englishData) {
      this.collegeEditing = false;
    },
    cancelChange() {
      this.dialogVisible = false;
    },
    // 更改校徽
    changeBadge() {
      this.loading = true;
      this.$message({
        message: '修改成功',
        type: 'success'
      });
      this.dialogVisible = false;
      this.loading = false;
    },
  }
}
</script>
<style lang="scss" scoped>
@import '../common.scss';

// other
.college-block {
  .input {
    display: none;
  }
  p {
    display: block;
    color: #99A9BF;
    &.no-edit-phone {
      display: none;
    }
  }
  &.editing {
    .input{
      display: block;
      &.input-hide {
        display: none;
      }
    }
    p {
      display: none;
      &.no-edit-phone {
        display: block;
      }
      &.visible {
        display: block;
      }
    }
  }
}

.el-row {
  padding: 15px 20px;
  line-height: 36px;
  .hidden {
    display: none;
  }
}

.img-wrap {
  height: 180px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  z-index: 2;
  .college-logo {
    height: 100%;
  }
  .upload-badge {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    line-height: 180px;
    text-align: center;
    background-color: rgba(0,0,0,.6);
    color: #fff;
    display: none;
    z-index: 1;
    input {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
    }
  }
  &:hover {
    .upload-badge {
      display: block;
    }
  }
}
</style>
